<template>
    <div style="width: 100%;">
        <div>
            <el-button type="primary" @click="handleCreate()">创建标签</el-button>
            <el-button v-if="this.selectedRows.length>0" type="danger" @click="handleDelete()">删 除</el-button>
        </div>
        <el-table
                :data="labels"
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    fixed
                    type="selection"
                    align="center"
                    width="40">
            </el-table-column>
            <el-table-column
                    label="ID"
                    prop="ID">
            </el-table-column>
            <el-table-column
                    label="名称"
                    prop="Name">
            </el-table-column>
            <el-table-column
                    label="图片宽度(PX)"
                    prop="Width">
            </el-table-column>
            <el-table-column
                    label="图片高度(PX)"
                    prop="Height">
            </el-table-column>
            <el-table-column
                    label="大小限制(KB)"
                    prop="SizeKB">
            </el-table-column>
            <el-table-column label="允许操作图片">
                <template slot-scope="scope">
                    <i v-if="scope.row.AllowedEdit===1" class="el-icon-circle-check-outline" style="color: #67C23A"></i>
                    <i v-else class="el-icon-circle-close-outline" style="color: #F56C6C"></i>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleEdit(scope.row)"><i class="iconfont icon-edit-square"></i></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                :title="createForm?'创建标签':'修改标签'"
                :visible.sync="dialogFormVisible"
                lock-scroll
                :append-to-body="true"
                center
                width="600px">
            <el-form :model="form" label-width="120px">
                <el-form-item label="名称">
                    <el-input v-model="form.Name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="Key(16位)">
                    <el-input v-model="form.Key" autocomplete="off" :disabled="!createForm"></el-input>
                </el-form-item>
                <el-form-item label="宽度(PX)">
                    <el-input v-model.number="form.Width" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="高度(PX)">
                    <el-input v-model.number="form.Height" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="大小(KB)">
                    <el-input v-model.number="form.SizeKB" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="允许操作图片">
                    <el-switch v-model.number="allowedEdit"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleUpdate(form)">提 交</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                labels: [],
                selectedRows:[],
                dialogFormVisible: false,
                createForm: true, // true-create false-update
                form: {
                    ID:0,
                    Name: '',
                    Key:"",
                    Width: 0,
                    Height: 0,
                    AllowedEdit: 2,
                    SizeKB: 0,
                },
            }
        },
        computed: {
            allowedEdit: {
                get: function () {
                    return this.form.AllowedEdit === 1
                },
                set: function (v) {
                    if(v) {
                        this.form.AllowedEdit = 1
                    } else {
                        this.form.AllowedEdit = 2
                    }
                }
            },
        },
        created: function () {
            this.$axios.get("/admin/image-labels").then((resp)=>{
                if(resp.data.labels) {
                    this.labels = resp.data.labels
                }
            });
        },
        methods: {
            handleSelectionChange(rows){
                this.selectedRows = rows;
            },
            handleUpdate(form){
                this.$axios({
                    method: this.createForm?"POST":"PUT",
                    url: "/admin/image-label",
                    data: form
                }).then((resp)=>{
                    if(resp.data.label) {
                        this.labels.splice(0, 0, resp.data.label);
                        this.dialogFormVisible = false
                    }
                    if(this.$isSuccessMsg(resp)) {
                        this.dialogFormVisible = false
                    }
                });
            },
            handleCreate() {
                this.form = {
                    ID:0,
                    Name: '',
                    Width: 0,
                    Height: 0,
                    SizeKB: 0,
                    AllowedEdit: 2,
                };
                this.createForm = true;
                this.dialogFormVisible = true;
            },
            handleEdit(row) {
                this.createForm = false;
                this.form = row;
                this.dialogFormVisible = true;
            },
            handleDelete() {
                let ids = [];
                for (let j = 0, lnDel=this.selectedRows.length; j < lnDel; j++) {
                    ids.push(this.selectedRows[j].ID);
                }
                this.$confirm("确认删除所有选中项?").then(()=>{
                    this.$axios.delete("/admin/image-label", {params: {IDs: ids}}).then((resp)=>{
                        if(this.$isSuccessMsg(resp)) {
                            for(let id of ids) {
                                for (let i = 0; i < this.labels.length; i++) {
                                    let item = this.labels[i];
                                    if (item.ID === id) {
                                        this.labels.splice(i, 1)
                                    }
                                }
                            }
                        }
                    });
                })
            },
        }
    }
</script>